<template>
  <div class="personnel-table">
    <span>{{ testTitle }}</span>
    <div class="table">
      <vxe-table :data="testData" border highlight-hover-row>
        <!-- 展开列 -->
        <vxe-table-column
          v-show="testData.length > 0"
          type="seq"
          width="60"
        ></vxe-table-column>
        <vxe-table-column
          v-show="testData.length > 0"
          type="checkbox"
          width="50"
        ></vxe-table-column>
        <template v-for="(item, index) in familyColumns">
          <vxe-table-column
            :key="index"
            :field="item.prop"
            :title="item.label"
            :width="item.width"
          >
          </vxe-table-column>
        </template>
      </vxe-table>
    </div>
    <!-- 分页 -->
    <slot name="memberPage"></slot>
  </div>
</template>

<script>
export default {
  data() {
    return {}
  },
  props: {
    testData: {
      type: Array,
      default: () => {
        return []
      }
    },
    familyColumns: {
      type: Array,
      default: () => {
        return []
      }
    },
    testTitle: {
      type: String,
      default: ""
    }
  }
}
</script>
<style lang="scss" scoped>
.personnel-table {
  width: 300px;
  display: flex;
  flex-direction: column;
  height: 100%;
  .table {
    flex: 1;
    height: 100%;
  }
}
</style>
